BootstrapVue — Customizing Checkboxes

To make good looking Vue apps, we need to style our components. To make our lives easier, we can use components with styles built-in.

In this article, we’ll look at how to customize checkboxes with BootstrapVue.

HTML Checkbox Text

We can have HTML in our checkbox text. Instead of the text property, we use the html to set the text.

However, we should be careful of cross-site scripting attacks since the HTML won’t be sanitized before being displayed.

For example, we can write:

<template>
  <div id="app">
    <b-form-group label="fruits">
      <b-form-checkbox-group v-model="selected" :options="options" name="fruits"></b-form-checkbox-group>
    </b-form-group>
    <div>{{ selected }}</div>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      options: [
        { text: "orange", value: "orange", disabled: false },
        { html: "<b>apple</b>", value: "apple", disabled: false },
      ],
      selected: []
    };
  }
};
</script>

We have html: “<b>apple</b>” to make ‘apple’ bold.

Inline and Stacked Checkboxes

We can add the stacked prop on b-form-checkbox-groip to stack the options.

For instance, we can write:

<template>
  <div id="app">
    <b-form-group label="fruits">
      <b-form-checkbox-group stacked v-model="selected" :options="options" name="fruits"></b-form-checkbox-group>
    </b-form-group>
    <div>{{ selected }}</div>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      options: [
        { text: "orange", value: "orange", disabled: false },
        { text: "apple", value: "apple", disabled: false },
      ],
      selected: []
    };
  }
};
</script>

Then the checkboxes will be stacked instead of being side by side.

Sizing

We can change the sizing of the checkbox. To do that, we can use the size prop. The available options are sm or lg

For instance, we can write:

<template>
  <div id="app">
    <b-form-checkbox size="sm">Small</b-form-checkbox>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

to get an extra small checkbox.

Button Style Checkbox

We can change the checkbox to look like a button. We can do that with the button prop.

For instance, we can write:

<template>
  <div id="app">
    <b-form-checkbox v-model="checked" name="checked" button>
      <b>{{ checked }}</b>
    </b-form-checkbox>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      checked: false
    };
  }
};
</script>

We add the button prop to the b-form-checkbox and then we put our content inside the tags. Also, we can add the button-variant to change the style of the button.

For instance, we can write:

<template>
  <div id="app">
    <b-form-checkbox v-model="checked" button-variant="info" name="checked" button>
      <b>{{ checked }}</b>
    </b-form-checkbox>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      checked: false
    };
  }
};
</script>

The button-variant takes a variant string like other BootstrapVue components. info would make the button green.

Grouped Button Style Checkboxes

Like buttons, we can group button style checkboxes. We can use the b-form-checkbox-group to create a group of button style checkboxes.

For example, we can write:

<template>
  <div id="app">
    <b-form-checkbox-group v-model="selected" :options="options" buttons></b-form-checkbox-group>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      selected: [],
      options: ["apple", "orange", "banana"]
    };
  }
};
</script>

We have the buttons prop to turn the checkbox group into a group of button style checkboxes. Also, we can customize them like buttons.

We can use the size and button-variant props on them.

For example, we can write:

<template>
  <div id="app">
    <b-form-checkbox-group
      button-variant="primary"
      size="lg"
      v-model="selected"
      :options="options"
      buttons
    ></b-form-checkbox-group>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      selected: [],
      options: ["apple", "orange", "banana"]
    };
  }
};
</script>

We made our button style checkboxes big with size="lg" and button-variant='primary' make them blue.

Switch Style Checkboxes

We can make a checkbox look like a switch toggle.

For instance, we can write:

<template>
  <div id="app">
    <b-form-checkbox v-model="checked" name="check-button" switch>{{ checked }}</b-form-checkbox>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      checked: false
    };
  }
};
</script>

We add the switch prop to make a checkbox look like a toggle switch.

Conclusion

We can do many things with checkboxes.

The text can be customized.

We can also make each checkbox look like buttons.

Their sizes can also change.

We can also make checkboxes look like a toggle switch.